<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程之综合实例-购物车效果</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #main, #cart, #top {
            width: 780px;
            height: auto;
            margin: 0px auto;
        }
        img {
            cursor: pointer;
        }

        #cart table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        #cart table td {
            text-align: center;
        }

    </style>
</head>
<body>
<h1 style="text-align: center">购物车</h1>
<hr>
<div id="main">
    <div id="cart">
        <table id="cartlist">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>100</td>
                <td>农夫山泉</td>
                <td>2</td>
                <td><img src="https://img.simoniu.com/taobao_minus.jpg" class="subNum"/>&nbsp;<input type="text" value="15" readonly
                                                                                    style="width: 20px"/>&nbsp;<img
                        src="https://img.simoniu.com/taobao_adding.jpg" class="addNum"/></td>
                <td class="xj">30</td>
                <td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
            </tr>
            <tr>
                <td>101</td>
                <td>康师傅方便面</td>
                <td>5</td>
                <td><img src="https://img.simoniu.com/taobao_minus.jpg" class="subNum"/>&nbsp;<input type="text" value="10" readonly
                                                                                    style="width: 20px"/>&nbsp;<img
                        src="https://img.simoniu.com/taobao_adding.jpg" class="addNum"/></td>
                <td class="xj">50</td>
                <td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
            </tr>
            <tr>
                <td>102</td>
                <td>双汇火腿肠</td>
                <td>8</td>
                <td><img src="https://img.simoniu.com/taobao_minus.jpg" class="subNum"/>&nbsp;<input type="text" value="5" readonly
                                                                                    style="width: 20px"/>&nbsp;<img
                        src="https://img.simoniu.com/taobao_adding.jpg" class="addNum"/></td>
                <td class="xj">40</td>
                <td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
            </tr>
            <tr>
                <td>104</td>
                <td>清风卫生纸</td>
                <td>10</td>
                <td><img src="https://img.simoniu.com/taobao_minus.jpg" class="subNum"/>&nbsp;<input type="text" value="10" readonly
                                                                                    style="width: 20px"/>&nbsp;<img
                        src="https://img.simoniu.com/taobao_adding.jpg" class="addNum"/></td>
                <td class="xj">100</td>
                <td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
            </tr>
            <tr>
                <td>105</td>
                <td>清心口香糖</td>
                <td>13</td>
                <td><img src="https://img.simoniu.com/taobao_minus.jpg" class="subNum"/>&nbsp;<input type="text" value="2" readonly
                                                                                                     style="width: 20px"/>&nbsp;<img
                        src="https://img.simoniu.com/taobao_adding.jpg" class="addNum"/></td>
                <td class="xj">26</td>
                <td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
            </tr>
            <tr>
                <td>106</td>
                <td>黑人牙膏</td>
                <td>12</td>
                <td><img src="https://img.simoniu.com/taobao_minus.jpg" class="subNum"/>&nbsp;<input type="text" value="2" readonly
                                                                                    style="width: 20px"/>&nbsp;<img
                        src="https://img.simoniu.com/taobao_adding.jpg" class="addNum"/></td>
                <td class="xj">24</td>
                <td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
            </tr>
        </table>
        <div style="text-align: center">
            <hr>
            <div>总金额：<span id="totalPrice">xxxx</span></div>
        </div>
    </div>
    <hr>
    <div style="text-align: center">
        <input type="button" value="结算" onclick="javascript:alert('去结算啰....');"/><input type="button" value="清空购物车" id="clear" onclick="clearCart()"/>
    </div>
</div>
<script>
    //总金额变量
    let totalPrice = 0;
    //删除商品从购物车
    function deleteItem(obj){
        if(window.confirm("确定要删除该商品吗？")){
            console.log('deleting...');
            $(obj).parent().parent().remove();

            initTotalPrice();
        }
    }

    //计算总金额
    function initTotalPrice() {
        //设置总金额初始值为0
        totalPrice = 0;
        $("tr").each(function (i, e) {
            $(e).children().filter(".xj").each(function (index, element) {
                //console.log($(element).text());
                totalPrice += parseInt($(element).text());
            })
        })
        $("#totalPrice").text(totalPrice);
    }

    //清空购物车
    function clearCart() {
        $("#cartlist").empty();
        let html = "<tr>\n" +
            "                <th>编号</th>\n" +
            "                <th>名称</th>\n" +
            "                <th>单价</th>\n" +
            "                <th>数量</th>\n" +
            "                <th>小计</th>\n" +
            "                <th>操作</th>\n" +
            "            </tr>"

        $("#cartlist").append(html);
        totalPrice = 0;
        $("#totalPrice").text(totalPrice);

    }

    $(function () {
        //初始化购物车总金额
        initTotalPrice();

        //减少购买数量
        $(".subNum").click(function () {
            //获得购买数量
            let num = parseInt($(this).next().val());
            //获得单价
            let price = parseInt($(this).parent().prev().text());
            if (num > 1) {
                num--;
                let xj = num * price;
                $(this).next().val(num);
                $(this).parent().next().text(xj);
            }
            //重新计算总金额
            initTotalPrice();

        })

        //增加购买数量
        $(".addNum").click(function () {
            //获得购买数量
            let num = $(this).prev().val();
            //获得单价
            let price = parseInt($(this).parent().prev().text());
            if (num < 100) {
                num++;
                let xj = num * price;
                $(this).prev().val(num);
                $(this).parent().next().text(xj);
            }
            initTotalPrice();
        })
    })

</script>
</body>
</html>


